<template>
    <div>
        <el-row class="search-title">
            <el-col :span="24">查询条件</el-col>
        </el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="文本">
                <el-input v-model="formInline.user" placeholder="Approved by" />
            </el-form-item>
            <el-form-item label="下拉">
                <el-select v-model="formInline.region" placeholder="Activity zone">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :push="23" :span="1">
                <el-button type="primary" size="small" @click="addFun">新增</el-button>
            </el-col>
        </el-row>
        <el-table border :data="tableData" style="width: 100%">
            <el-table-column align="center" type="index" width="50" />
            <el-table-column align="center" prop="username" label="账号" width="150" />
            <el-table-column align="center" prop="nickname" label="用户名" width="150" />
            <el-table-column align="center" props="sex" label="性别" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.sex == 0">男</el-tag>
                    <el-tag v-else-if="scope.row.sex == 1" type="danger">女</el-tag>
                    <el-tag v-else>未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="头像" props="avatarUrl" width="150">
                <template #default="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.avatarUrl" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="phone" label="电话" width="150" />
            <el-table-column show-overflow-tooltip align="center" prop="email" label="邮箱" width="150" />
            <el-table-column show-overflow-tooltip width="150" align="center" prop="address" label="地址" />
            <el-table-column align="center" props="status" label="账号状态" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0">正常</el-tag>
                    <el-tag v-else-if="scope.row.sex == 1" type="danger">封禁</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" props="isAdmin" label="身份" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.isAdmin == 0">管理员</el-tag>
                    <el-tag v-else type="danger">普通用户</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="deleteFun(scope.row)">删除</el-button>
                    <el-button link type="primary" size="small" @click="editFun(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang='ts' name='userList'>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getUserInfoPage } from '../../api/user/User.js'

const router = useRouter()
const formInline = reactive({
    user: '',
    region: ''
})

let tableData = ref<any[]>([])

const param = reactive({
    pageNum: 1,
    pageSize: 10,
})
const total = ref(0)
const currentPage = ref(0)
const pageSize = ref(0)
// 获取用户分页数据
getUserInfoPage(param).then(res => {
    tableData.value = res.data.records
    total.value = res.data.total
    currentPage.value = res.data.current
    pageSize.value = res.data.size
    console.log(tableData.value);
})



const disabled = ref(false)
const background = ref(false)

// 改变每页条数
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
// 改变当前页码
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
// 查询
const onSubmit = () => {
    console.log('submit!', formInline.user)
}
// 新增
const addFun = () => {
    router.push('/member_list_add')
}
// 删除
const deleteFun = (row: any) => {
    console.log('row删除', row)
    ElMessage({ message: '删除成功！', type: 'success' })
}
// 编辑
const editFun = (row: any) => {
    console.log('row编辑', row)
    router.push({ path: '/member_list_add', query: { id: row.id } })
}
</script>

<style scoped>
.search-title {
    margin-bottom: 6px;
    color: #999;
    font-size: 12px;
}

.pagination-block {
    float: right;
    margin: 5px 0;
}

.demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>